<template>
    <div>
        <div>
            <div class="block-container">
                <div class="block">

                    <el-form ref="searchForm" :model="searchForm" label-width="80px" >
                        <div class="top-div">
                            <el-form-item label="名称">
                                <el-input v-model="searchForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="产地">
                                <el-input v-model="searchForm.locality"></el-input>
                            </el-form-item>
                            <el-form-item label="最低价格" >
                                <el-input v-model="searchForm.startPrice"></el-input>

                            </el-form-item>
                            <el-form-item label="最高价格">
                                <el-input v-model="searchForm.endPrice"></el-input>
                            </el-form-item>

                            <el-date-picker
                                    v-model="value"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    style="margin-left: 20px"
                            />
                            <div style="display: flex;justify-content: space-between">
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addComdit">添加</el-button>
                                </el-form-item>
                            </div>


                        </div>
                        <div class="btn-wrap">

                        </div>

                    </el-form>
                </div>

                <div class="block-bottom">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[5, 10, 20, 30]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>

            <div class="table-box">
                <el-table
                        :data="pageData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            align="center"
                            type="index"
                            label="序号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="locality"
                            label="产地"
                            width="300">
                    </el-table-column>

                    <el-table-column
                            prop="createTime"
                            label="创建日期"
                            width="350">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <el-button @click="editCommit(scope.row,scope.$index)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteFruits(scope.row.fruitId)">删除</el-button>
                            <el-button type="text" size="small" @click="showAccessoryPage(scope.row.fruitId)">附属品</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--查看或编辑对话框-->
            <el-dialog
                    title="修改信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <div>
                    <el-form ref="comditDataForm" :model="rowData" label-width="80px" :rules="rules">
                        <el-form-item label="水果名称" prop="name">
                            <el-input v-model="rowData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="rowData.price"></el-input>
                        </el-form-item>
                        <el-form-item label="产地" prop="address">
                            <el-input v-model="rowData.locality"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
            </el-dialog>
            <!--添加对话框-->
            <el-dialog
                    title="修改信息"
                    :visible.sync="addVisible"
                    width="30%"
                    :before-close="handleClose">
                <div>
                    <el-form ref="addFruitsForm" :model="addData" label-width="80px" :rules="rules">
                        <el-form-item label="水果名称" prop="name">
                            <el-input v-model="addData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="price">
                            <el-input v-model="addData.price"></el-input>
                        </el-form-item>
                        <el-form-item label="产地" prop="locality">
                            <el-input v-model="addData.locality"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
            </el-dialog>
            <!--附属品的对话框-->
            <el-dialog
                    title="修改信息"
                    :visible.sync="accessoryVisible"
                    width="30%"
                    :before-close="handleClose">
                <div>
<!--                    <el-form ref="addFruitsForm" :model="addData" label-width="80px" :rules="rules">-->
<!--                        <el-form-item label="水果名称" prop="name">-->
<!--                            <el-input v-model="addData.name"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="价格" prop="price">-->
<!--                            <el-input v-model="addData.price"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="产地" prop="locality">-->
<!--                            <el-input v-model="addData.locality"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="accessoryVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>

    import {
        selectAllModities,
        selectComNums,
        addFruits,
        editFruits,
        deleteFruits,
    } from "../api/require";

    export default {
        name: "CommoditieModel",
        data() {
            return {
                searchForm:{
                    startPage:'0',
                    pageSize:'10',
                },
                addData:{
                    name:'',
                    price:'',
                    locality:''
                },
                totalNum:10,
                currentPage4: 1,//当前页码
                value: '',//查询日期
                pageData:[],//数据
                dialogVisible: false,//对话框的显示
                rowData:{},
                rules: {
                    name: [{ required: true, message: '请输入水果名称', trigger: 'blur' }],
                    price: [{ required: true, message: '请输价格', trigger: 'blur' }],
                    locality: [{ required: true, message: '请输入产地', trigger: 'blur' }],
                },
                dataIndex:0,//操作的行数
                addVisible:false,//tianjia
                accessoryVisible:false//附属品显示
            };
        },
        created() {
            this.getAllModities();
            this.getNums()
        },
        methods:{
            //天加
            addComdit(){
                this.addVisible = true;
            },
            submitAdd(){
                this.$refs.addFruitsForm.validate((valid)=> {
                    if (valid) {
                        addFruits(this.addData).then(res=>{
                            if (res.data.code === 200){
                                this.$message({message:"添加成功",type:'success'});
                                this.getNums()
                                this.getAllModities()
                            }else{
                                this.$message({message:"添加失败",type:'success'})
                            }
                            this.resetAddForm()
                            this.addVisible = false;
                        })
                    }else{
                        this.$message({message:'数据格式有误',type:"error"})
                    }

                })

            },
            /**删除*/
            deleteFruits(id){
                this.$confirm("确定删除？").then(res=>{
                    /*删除*/
                    console.log('删除')
                    deleteFruits(id).then(res=>{
                        if (res.data.code === 200){
                            this.$message({message:"删除成功",type:'success'})
                            this.getNums();
                            this.getAllModities();
                        }else{
                            this.$message({message:"删除失败",type:"error"})
                        }
                    }).catch(_=>{
                        this.$message({message:"系统有误",type:"error"})
                    })
                }).catch(_=>{})
            },
            getAllModities(){
                selectAllModities(this.searchForm).then(res=>{
                    console.log(res)
                    this.pageData = res.data.obj
                }).catch(_=>{
                    this.$message({message:"系统错误",type:'error'})
                })
            },
            //获取页码
            getNums(){
                selectComNums(this.searchForm).then(res=>{
                    console.log("查询数据",res)
                    this.totalNum = res.data.obj
                }).catch(err=>{
                    this.$message({message:'系统错误'})
                })
            },
            onSubmit(){
                this.searchForm.startTime=this.value ? this.value[0] : ''
                this.searchForm.endTime=this.value ? this.value[1] : ''
                console.log(this.searchForm);
                // this.searchForm.startPage = 0
                this.getNums();
                this.getAllModities();
                this.resetForm()

            },
            handleSizeChange(val) {

                this.searchForm.pageSize = val
                this.getAllModities();
            },
            handleCurrentChange(val) {

                this.searchForm.startPage = val-1
                this.getAllModities();
            },
            //编辑水果
            editRetailer(row,index) {
                console.log("用户信息",row,index);
                // this.dialogVisible = true;
                // this.rowData = row;
                // this.dataIndex = index;

            },
            resetForm(){
                this.searchForm= {
                    startPage: '0',
                    pageSize: '10',
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //修改
            editCommit(row,index){
                console.log("水果信息",row)
                this.dialogVisible = true;
                this.rowData = row;
                this.dataIndex = index;

            },
            submitEdit(){

                this.$refs.comditDataForm.validate((valid)=>{
                    if (valid){
                        editFruits(this.rowData).then(res=>{
                            console.log("修改返回的消息",res)
                            if (res.data.code === 200){
                                this.$message({message:"修改成功",type:'success'});
                                this.$set(this.pageData[this.dataIndex],this.rowData)
                            }else{
                                this.$message({message:"修改失败",type:'success'})
                            }
                            this.rowData = {}
                            this.dialogVisible = false;
                        }).catch(err=>{
                            this.$message({message:"系统错误",type:"error"})
                        })
                    }else{
                        this.$message({message:"数据格式有误",type:'error'});
                    }
                })
            },
            //添加用户
            resetAddForm(){
                this.addData={
                    name:'',
                    price:'',
                    locality:''
                }
            },
            //附属显示
            showAccessoryPage(id){
                this.$router.push(`/main/accessory/${id}`)
            }

        }
    }
</script>

<style scoped lang="scss">
    .block{
        position: relative;
        top: -10px;

    }
    .top-div{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .two_div{
        width: 70%;
        display: flex;
        justify-content: space-between;

    }
    .block-bottom{
        position: absolute;
        bottom: 10px;
        left: 18%;
    }
    .table-box{
        height: 530px;
        background: orange;
        overflow: auto;

    }
</style>
